/* 中国山水笔墨风格CSS */
:root {
  /* 传统中国画配色 */
  --ink-black: #1c1c1a;
  --ink-gray: #3e3a39;
  --rice-paper: #f8f4e6;
  --rice-paper-dark: #e8e4d6;
  --ink-wash-1: #d1cdc1;
  --ink-wash-2: #b2ada1;
  --mountain-green: #2a5d43;
  --light-green: #7ba686;
  --bamboo-green: #356f55;
  --stone-gray: #8c8984;
  --vermilion: #bc3523;
  --crimson: #9f1a22;
  --indigo-blue: #1f4a7c;
  --light-blue: #6980a0;
  --gold: #d3a45c;
  --earth-brown: #7a5a40;
}

/* 基础样式重置 */
body {
  font-family: "FangSong", "仿宋", "SimSun", "宋体", serif;
  background-color: var(--rice-paper);
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='rice-paper' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Crect width='40' height='40' fill='%23f8f4e6'/%3E%3Cpath d='M0 20 L40 20' stroke='%23e8e4d6' stroke-width='0.5'/%3E%3Cpath d='M20 0 L20 40' stroke='%23e8e4d6' stroke-width='0.5'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23rice-paper)'/%3E%3C/svg%3E");
  margin: 0;
  padding: 0;
  color: var(--ink-black);
}

/* 水墨按钮 */
.ink-button {
  background-color: var(--ink-black);
  color: var(--rice-paper);
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: 500;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.ink-button:before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.5s;
}

.ink-button:hover:before {
  left: 100%;
}

.ink-button:active {
  transform: translateY(2px);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}

/* 水墨卡片 */
.ink-card {
  background-color: var(--rice-paper);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 20px;
  border-left: 3px solid var(--ink-black);
  position: relative;
  overflow: hidden;
}

.ink-card:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 Q10 0, 20 10 Q30 20, 40 0' stroke='%233e3a39' stroke-width='0.8' fill='none' opacity='0.2'/%3E%3C/svg%3E");
  background-size: contain;
  opacity: 0.1;
}

/* 中国风导航栏 */
.chinese-navbar {
  background-color: var(--rice-paper);
  border-bottom: 1px solid var(--ink-wash-2);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  position: relative;
}

.chinese-navbar:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--vermilion), var(--indigo-blue), var(--bamboo-green));
  opacity: 0.7;
}

/* 山水画图标背景 */
.mountain-icon-bg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--rice-paper-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.mountain-icon-bg:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='50' height='20' viewBox='0 0 50 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 L10 10 L15 15 L25 5 L35 12 L40 7 L50 15 L50 20 Z' fill='%232a5d43' opacity='0.3'/%3E%3C/svg%3E");
  background-size: cover;
}

/* 中国风分割线 */
.chinese-divider {
  height: 1px;
  background-color: var(--ink-wash-2);
  margin: 20px 0;
  position: relative;
}

.chinese-divider:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='10' viewBox='0 0 100 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5 L100 5' stroke='%238c8984' stroke-width='1' stroke-dasharray='1 3'/%3E%3C/svg%3E");
  background-size: cover;
}

/* 中国风标签页 */
.chinese-tabs {
  display: flex;
  background-color: var(--rice-paper-dark);
  border-radius: 8px;
  padding: 4px;
  position: relative;
  overflow: hidden;
}

.chinese-tabs:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--vermilion), transparent);
}

.chinese-tab {
  flex: 1;
  text-align: center;
  padding: 10px;
  font-weight: 500;
  color: var(--ink-gray);
  position: relative;
  transition: all 0.3s;
}

.chinese-tab.active {
  color: var(--ink-black);
  background-color: var(--rice-paper);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.chinese-tab.active:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background-color: var(--vermilion);
}

/* 水墨输入框 */
.ink-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--ink-wash-2);
  background-color: var(--rice-paper);
  font-family: inherit;
  transition: all 0.3s;
}

.ink-input:focus {
  outline: none;
  border-color: var(--ink-gray);
  box-shadow: 0 0 0 2px rgba(62, 58, 57, 0.1);
}

/* 底部标签栏 */
.chinese-tab-bar {
  background-color: var(--rice-paper);
  border-top: 1px solid var(--ink-wash-1);
  display: flex;
  padding: 10px 0 25px;
  position: relative;
}

.chinese-tab-bar:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--mountain-green), var(--indigo-blue), var(--earth-brown));
  opacity: 0.1;
}

.chinese-tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--ink-gray);
  transition: all 0.3s;
}

.chinese-tab-item.active {
  color: var(--mountain-green);
}

/* SVG图标：山水风格 */
.mountain-svg {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 18 L7 11 L11 14 L16 6 L21 18 Z' stroke='%232a5d43' stroke-width='1.5' fill='none'/%3E%3Cpath d='M3 18 L21 18' stroke='%232a5d43' stroke-width='1.5'/%3E%3C/svg%3E");
  width: 24px;
  height: 24px;
  background-size: contain;
  display: inline-block;
}

.cloud-svg {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 14 Q2 14, 2 12 Q2 10, 4 10 Q4 7, 7 7 Q10 7, 10 10 Q12 9, 14 10 Q15 7, 18 7 Q21 7, 21 10 Q23 10, 23 12 Q23 14, 21 14 Z' stroke='%231f4a7c' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  width: 24px;
  height: 24px;
  background-size: contain;
  display: inline-block;
}

.tree-svg {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3 L12 21' stroke='%23356f55' stroke-width='1.5'/%3E%3Cpath d='M6 8 Q12 2, 18 8' stroke='%23356f55' stroke-width='1.5' fill='none'/%3E%3Cpath d='M6 13 Q12 7, 18 13' stroke='%23356f55' stroke-width='1.5' fill='none'/%3E%3Cpath d='M6 18 Q12 12, 18 18' stroke='%23356f55' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  width: 24px;
  height: 24px;
  background-size: contain;
  display: inline-block;
}

.brush-svg {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 4 L8 14 L6 18 L10 16 L20 6 Z' stroke='%239f1a22' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  width: 24px;
  height: 24px;
  background-size: contain;
  display: inline-block;
}

.temple-svg {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 21 L20 21' stroke='%237a5a40' stroke-width='1.5'/%3E%3Cpath d='M5 16 L19 16' stroke='%237a5a40' stroke-width='1.5'/%3E%3Cpath d='M6 11 L18 11' stroke='%237a5a40' stroke-width='1.5'/%3E%3Cpath d='M8 6 L16 6' stroke='%237a5a40' stroke-width='1.5'/%3E%3Cpath d='M12 3 L12 6' stroke='%237a5a40' stroke-width='1.5'/%3E%3Cpath d='M7 16 L7 21' stroke='%237a5a40' stroke-width='1.5'/%3E%3Cpath d='M12 16 L12 21' stroke='%237a5a40' stroke-width='1.5'/%3E%3Cpath d='M17 16 L17 21' stroke='%237a5a40' stroke-width='1.5'/%3E%3C/svg%3E");
  width: 24px;
  height: 24px;
  background-size: contain;
  display: inline-block;
}

/* 水墨雾化背景元素 */
.ink-bg-element {
  position: absolute;
  opacity: 0.05;
  z-index: 0;
}

.ink-splash {
  position: absolute;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 50 Q50 20, 70 50 Q50 80, 30 50 Z' fill='%233e3a39' opacity='0.8'/%3E%3C/svg%3E");
  background-size: contain;
  width: 100px;
  height: 100px;
  opacity: 0.1;
  z-index: -1;
}

/* 水墨卷轴元素 */
.scroll-container {
  position: relative;
  padding: 20px;
  border-radius: 5px;
  background-color: var(--rice-paper);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.scroll-container:before, .scroll-container:after {
  content: '';
  position: absolute;
  height: 20px;
  left: 0;
  right: 0;
  background-color: var(--stone-gray);
  opacity: 0.1;
}

.scroll-container:before {
  top: 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.scroll-container:after {
  bottom: 0;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* 中国风徽章 */
.chinese-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  position: relative;
  background-color: var(--rice-paper-dark);
  color: var(--ink-gray);
  margin-right: 8px;
  border: 1px solid var(--ink-wash-2);
}

.chinese-badge.red {
  color: var(--vermilion);
  border-color: var(--vermilion);
  background-color: rgba(188, 53, 35, 0.1);
}

.chinese-badge.green {
  color: var(--mountain-green);
  border-color: var(--mountain-green);
  background-color: rgba(42, 93, 67, 0.1);
}

.chinese-badge.blue {
  color: var(--indigo-blue);
  border-color: var(--indigo-blue);
  background-color: rgba(31, 74, 124, 0.1);
}

.chinese-badge.gold {
  color: var(--gold);
  border-color: var(--gold);
  background-color: rgba(211, 164, 92, 0.1);
}

/* 装饰元素：中式纹样 */
.chinese-pattern {
  position: absolute;
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 A20 20 0 0 1 20 0 A20 20 0 0 1 40 20 A20 20 0 0 1 20 40 A20 20 0 0 1 0 20 Z' stroke='%238c8984' stroke-width='0.5' fill='none'/%3E%3Cpath d='M10 20 A10 10 0 0 1 20 10 A10 10 0 0 1 30 20 A10 10 0 0 1 20 30 A10 10 0 0 1 10 20 Z' stroke='%238c8984' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
  opacity: 0.2;
  z-index: -1;
}

/* 图标块：带中式纹理的图标背景 */
.icon-block {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background-color: var(--rice-paper-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin-right: 16px;
}

.icon-block:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30 A30 30 0 0 1 30 0 A30 30 0 0 1 60 30 A30 30 0 0 1 30 60 A30 30 0 0 1 0 30 Z' stroke='%238c8984' stroke-width='0.5' fill='none' opacity='0.2'/%3E%3C/svg%3E");
  opacity: 0.1;
}

/* 手机模拟器框架的中国风样式 */
.phone-frame-chinese {
  width: 375px;
  height: 812px;
  border: 12px solid var(--ink-black);
  border-radius: 40px;
  overflow: hidden;
  position: relative;
  background-color: var(--rice-paper);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  margin: 20px;
  display: inline-block;
}

.phone-frame-chinese:before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 20px;
  background-color: var(--ink-black);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 1;
}

/* 中国山水笔墨风格样式 */
:root {
  /* 基础颜色 */
  --rice-paper: #f9f6f0;
  --rice-paper-dark: #f0ece2;
  --ink-black: #212121;
  --ink-gray: #4a4a4a;
  --stone-gray: #8c8984;
  
  /* 墨色系 */
  --ink-wash-1: #d9d5cd;
  --ink-wash-2: #e6e2dc;
  --ink-wash-3: #f1ede8;
  
  /* 主题色 */
  --vermilion: #ab4529; /* 朱砂 */
  --mountain-green: #2a5d43; /* 山林绿 */
  --indigo-blue: #1f4a7c; /* 靛青蓝 */
  --premium-gold: #d4a75c; /* 金色 */
}

/* 图标样式 */
.chinese-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chinese-icon::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 20 Q10 10, 20 20 Q30 30, 35 20' stroke='%232a5d43' stroke-width='0.8' fill='none' opacity='0.2'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
}

/* 按钮样式 */
.chinese-btn {
  padding: 10px 20px;
  border-radius: 8px;
  background-color: var(--rice-paper);
  color: var(--ink-gray);
  border: 1px solid var(--ink-wash-1);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.chinese-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: all 0.5s;
}

.chinese-btn:hover::before {
  left: 100%;
}

.chinese-btn.primary {
  background-color: var(--mountain-green);
  color: white;
  border: none;
}

.chinese-btn.secondary {
  background-color: var(--indigo-blue);
  color: white;
  border: none;
}

.chinese-btn.accent {
  background-color: var(--vermilion);
  color: white;
  border: none;
}

.chinese-btn.gold {
  background-color: var(--premium-gold);
  color: white;
  border: none;
}

/* 输入框样式 */
.chinese-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--ink-wash-1);
  background-color: var(--rice-paper);
  transition: all 0.3s;
}

.chinese-input:focus {
  outline: none;
  border-color: var(--mountain-green);
  box-shadow: 0 0 0 2px rgba(42, 93, 67, 0.1);
}

.chinese-input::placeholder {
  color: var(--stone-gray);
}

/* 卡片样式 */
.chinese-card {
  background-color: var(--rice-paper);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--ink-wash-1);
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}

.chinese-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  border-color: var(--ink-wash-1);
}

/* 通用水墨装饰 */
.ink-decoration {
  position: absolute;
  opacity: 0.05;
  z-index: -1;
}

.ink-splash {
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 100 Q50 50, 100 100 Q150 150, 180 100' stroke='%232a5d43' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.ink-dots {
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='2' fill='%238c8984'/%3E%3Ccircle cx='30' cy='10' r='2' fill='%238c8984'/%3E%3Ccircle cx='50' cy='10' r='2' fill='%238c8984'/%3E%3Ccircle cx='70' cy='10' r='2' fill='%238c8984'/%3E%3Ccircle cx='90' cy='10' r='2' fill='%238c8984'/%3E%3Ccircle cx='10' cy='30' r='2' fill='%238c8984'/%3E%3Ccircle cx='30' cy='30' r='2' fill='%238c8984'/%3E%3Ccircle cx='50' cy='30' r='2' fill='%238c8984'/%3E%3Ccircle cx='70' cy='30' r='2' fill='%238c8984'/%3E%3Ccircle cx='90' cy='30' r='2' fill='%238c8984'/%3E%3Ccircle cx='10' cy='50' r='2' fill='%238c8984'/%3E%3Ccircle cx='30' cy='50' r='2' fill='%238c8984'/%3E%3Ccircle cx='50' cy='50' r='2' fill='%238c8984'/%3E%3Ccircle cx='70' cy='50' r='2' fill='%238c8984'/%3E%3Ccircle cx='90' cy='50' r='2' fill='%238c8984'/%3E%3Ccircle cx='10' cy='70' r='2' fill='%238c8984'/%3E%3Ccircle cx='30' cy='70' r='2' fill='%238c8984'/%3E%3Ccircle cx='50' cy='70' r='2' fill='%238c8984'/%3E%3Ccircle cx='70' cy='70' r='2' fill='%238c8984'/%3E%3Ccircle cx='90' cy='70' r='2' fill='%238c8984'/%3E%3Ccircle cx='10' cy='90' r='2' fill='%238c8984'/%3E%3Ccircle cx='30' cy='90' r='2' fill='%238c8984'/%3E%3Ccircle cx='50' cy='90' r='2' fill='%238c8984'/%3E%3Ccircle cx='70' cy='90' r='2' fill='%238c8984'/%3E%3Ccircle cx='90' cy='90' r='2' fill='%238c8984'/%3E%3C/svg%3E");
  background-size: 100px 100px;
}

.ink-waves {
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q10 5, 20 10 Q30 15, 40 10 Q50 5, 60 10 Q70 15, 80 10 Q90 5, 100 10' stroke='%238c8984' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
  background-size: 100px 20px;
  background-repeat: repeat-x;
}

/* 动画效果 */
@keyframes inkDrop {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.ink-drop {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(42, 93, 67, 0.4);
  animation: inkDrop 2s ease-out forwards;
}

/* 通用阴影效果 */
.ink-shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.ink-shadow-deep {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* 响应式调整 */
@media (max-width: 640px) {
  .chinese-card {
    padding: 16px;
  }
  
  .chinese-btn {
    padding: 8px 16px;
  }
}

/* 文本样式 */
.ink-title {
  font-weight: 600;
  color: var(--ink-black);
  position: relative;
  padding-bottom: 8px;
}

.ink-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: var(--mountain-green);
}

.ink-text {
  color: var(--ink-gray);
  line-height: 1.6;
}

.ink-caption {
  font-size: 12px;
  color: var(--stone-gray);
}

/* 底部栏样式 */
.chinese-tab-bar {
  background-color: var(--rice-paper);
  border-top: 1px solid var(--ink-wash-1);
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 0;
  z-index: 10;
}

.chinese-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  color: var(--ink-gray);
  transition: all 0.3s;
}

.chinese-tab.active {
  color: var(--mountain-green);
}

.chinese-tab-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

.chinese-tab-label {
  font-size: 12px;
}

/* 水墨加载动画 */
.ink-loading {
  position: relative;
  width: 40px;
  height: 40px;
}

.ink-loading::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 20 A15 15 0 0 1 35 20 A15 15 0 0 1 5 20' stroke='%232a5d43' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-size: contain;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 